<script>
import { ref, watch } from 'vue'

export default {
  name: 'TabSortBuildingList',
  // total楼盘数据 sortRules排序的规则1 sortRules2排序的规则2 ,tabsList选项栏数据  ,buildingList楼盘列表数据
  props: ['total', 'sortRules2', 'sortRules', 'tabsList', 'buildingList', 'unit'],
  setup (props) {
    // 当前tabs栏
    const activeTab = ref(0)
    // tabs栏切换
    const changeTab = (idx) => {
      activeTab.value = idx
    }
    // 楼盘数据
    const newTotal = ref(null)
    watch(() => props.total, (newVal) => {
      newTotal.value = newVal
    }, {
      deep: true,
      immediate: true
    })
    // 正序倒序start
    const sortShow = ref(true)
    const sortShows = ref(false)
    const changeSort = () => {
      sortShow.value = !sortShow.value
    }
    const changeSortS = () => {
      sortShows.value = !sortShows.value
    }
    // 正序倒序end
    return {
      activeTab,
      sortShow,
      sortShows,
      newTotal,
      changeSort,
      changeSortS,
      changeTab
    }
  }
}
</script>
<template>
  <div class="new_left">
    <div class="tabs">
      <ul>
        <li class="" v-for="(tab,idx) in tabsList" :key="idx" @click="changeTab(idx)"
          :class="activeTab===idx?'active':''">{{tab.title}}
        </li>
      </ul>
    </div>
    <div class="sort">
      <div class="sort_left">为你找到<span style="color:#3072F6;">{{newTotal}}</span>个广州楼盘
      </div>
      <div class="sort_right">
        <div class="sort_item  sort_active">默认排序</div>
        <div class="sort_item" @click="changeSort">{{sortRules}}
          <div class="sort_icon">
            <div :class="sortShow?'sort_active':''">
              <el-icon :size="20">
                <CaretTop />
              </el-icon>
            </div>
            <div :class="!sortShow?'sort_active':''">
              <el-icon :size="20" class="icon">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="sort_item" @click="changeSortS">{{sortRules2}}
          <div class="sort_icon">
            <div :class="sortShows?'sort_active':''">
              <el-icon :size="20">
                <CaretTop />
              </el-icon>
            </div>
            <div :class="!sortShows?'sort_active':''">
              <el-icon :size="20" class="icon">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="buildingList">
      <ul>
        <a href="#">
          <li v-for="(building,idx) in buildingList" :key="idx">
            <div class="building_left"><img :src="building.imgUrl"></div>
            <div class="building_content">
              <div class="build_title">{{building.title}}</div>
              <div class="build_status">
                <div v-for="(status,idx) in building.status" :key="idx">{{status}}</div>
              </div>
              <div class="build_address" v-if="building.address">
                <div>
                  <el-icon color='#9399a5'>
                    <Location />
                  </el-icon>
                </div>
                <div>{{building.address}}</div>
              </div>
              <div class="build_info">
                <!-- 房子 -->
                <div>
                  <el-icon :size="14" color='#9399a5'>
                    <House />
                  </el-icon>
                </div>
                <div>户型:{{building.info}}</div>
                <div>建面:{{building.info2}}</div>
              </div>
              <div class="build_phone">{{building.phone}}</div>
            </div>
            <div style="color:#F15044;font-size:14px"><span
                style="font-size:30px">{{building.price}}</span>{{unit}}
            </div>
          </li>
        </a>

      </ul>
    </div>
  </div>
</template>

<style lang='less'>
.new_left {
  .tabs {
    width: 838px;
    margin: 0 auto 30px;
    ul {
      display: flex;
      width: 838px;
      height: 51px;
      border-bottom: 1px solid #3072f6;
      li {
        width: 122px;
        height: 51px;
        text-align: center;
        line-height: 51px;
        color: #9399a5;
        cursor: pointer;
      }
      .active {
        background-color: #3072f6;
        color: #fff;
      }
    }
  }
  .sort {
    width: 838px;
    margin: 0 auto;
    display: flex;
    height: 50px;
    justify-content: space-between;
    font-size: 22px;
    border-bottom: 1px solid rgb(237, 237, 237);
    .sort_left {
      color: #101d37;
    }
    .sort_right {
      display: flex;
      color: #101d37;
      font-size: 16px;
      .sort_item {
        position: relative;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-left: 30px;
        display: flex;
        cursor: pointer;
        .sort_icon {
          position: absolute;
          right: -20px;
          top: -6px;
        }
        .icon {
          position: absolute;
          top: 11px;
        }
      }
      .sort_item:nth-last-child(1) {
        margin-right: 20px;
      }
    }
    .sort_active {
      color: #3072f6;
    }
  }
  .buildingList {
    width: 838px;
    margin: 0 auto;
    ul {
      width: 838px;
      border-top: 1px solid #ededed;
      li {
        height: 247px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ededed;
        cursor: pointer;
        .building_left {
          width: 236px;
          height: 187px;
          img {
            width: 236px;
            height: 187px;
          }
        }
        .building_content {
          min-width: 420px;
          height: 187px;
          .build_title {
            display: flex;
            font-weight: 500;
            font-size: 22px;
            color: #101d37;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .build_status {
            display: flex;
            justify-content: space-around;
            margin: 8px 0 16px;
            div {
              font-family: 'HarmonyOS Sans SC';
              font-size: 14px;
              border-radius: 4px;
              padding: 4px 6px 4px 6px;
            }
            div:nth-child(1) {
              border: 1px solid #5f94ff;
              color: #5f94ff;
            }
            div:nth-child(2) {
              border: 1px solid #c0c5cf;
              color: #c0c5cf;
            }
            div:nth-child(3) {
              border: 1px solid #daac24;
              color: #daac24;
            }
            div:nth-child(4) {
              border: 1px solid #b199ff;
              color: #b199ff;
            }
            div:nth-child(5) {
              border: 1px solid #fc7b75;
              color: #fc7b75;
            }
            div:nth-child(6) {
              border: 1px solid #8fd24e;
              color: #8fd24e;
            }
            div:nth-child(7) {
              border: 1px solid #59a5eb;
              color: #59a5eb;
              margin-right: none;
            }
            div:nth-child(8) {
              border: 1px solid #fb9252;
              color: #fb9252;
              margin-right: none;
            }
          }
          .build_address {
            display: flex;
            align-items: flex-start;
            div:nth-child(2) {
              width: 380px;
              height: 42px;
              font-weight: 300;
              color: #9399a5;
              font-size: 14px;
              margin-left: 10px;
              line-height: 20px;
            }
          }
          .build_info {
            display: flex;
            margin: 8px 0 16px;
            font-weight: 300;
            color: #9399a5;
            font-size: 14px;
            div:nth-child(2) {
              margin: 0 16px 0 10px;
            }
          }
          .build_phone {
            width: 218px;
            height: 31px;
            text-align: center;
            line-height: 31px;
            background-color: #3072f6;
            font-size: 20px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
